<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <style>
        /* 交集选择器  只有标签具有.section和.current 才能选中 */
        .section.current h3 {
            font-size: 15em;
        }
    </style> -->

    <script src="../jquery-3.3.1.min.js"></script>

<!-- jquery.easings.min.js 用于 easing 参数，也可以使用完整的 jQuery UI 代替，如果不需要设置 easing 参数，可去掉改文件
<script src="js/jquery.easings.min.js"></script>

如果 scrollOverflow 设置为 true，则需要引入 jquery.slimscroll.min.js，一般情况下不需要
<script src="js/jquery.slimscroll.min.js"></script> -->

    <script src="../fullPage/jquery.fullPage.min.js"></script>
    <link rel="stylesheet" href="css/360Page.css">

</head>
<body>
        <div id="360Page">
            <div class="section first">
                <div class="logo"></div>
                <div class="text">
                    <span>三</span>
                    <span>亿</span>
                    <span>用</span>
                    <span>户</span>
                    <span>共</span>
                    <span>同</span>
                    <span>信</span>
                    <span>赖</span>
                </div> 
                <div class="adv">
                    <span>更安全</span>
                    <span>更爽快</span>
                    <span>更智能</span>
                    <span>更时尚</span>
                </div>
            </div>
            <div class="section second">
                <div class="pictures">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div class="content">
                    <div class="text1">9层安全防护，</div>
                    <div class="text2">全面保护更安全！</div>
                    <div class="adv1">
                        <span>网购先陪</span>
                        <span>网购保镖</span>
                        <span>网址云安全</span>
                        <span>下载云安全</span>
                        <span>沙箱防护</span>
                    </div>
                    <div class="adv2">
                        <span>隔离防护</span>
                        <span>系统级防注人</span>
                        <span>网站照妖镜</span>
                        <span>安全键盘</span>
                    </div>
                </div>
            </div>
            <div class="section third">
                <h3>第三屏</h3>
            </div>
            <div class="section fourth">
                <h3>第四屏</h3>
            </div>
            <div class="section fifth">
                <h3>第五屏</h3>
            </div>
        </div>
        <script>
            $(function(){
                $('#360Page').fullpage({
                    // 此处传入参数  也就是教程里面的 配置
                    sectionsColor:["#71ffff","#9dff3c","#ff5bad","#ffb366","#ff8080"],
                    css3:"true",
                    // 当滚动到某一屏之后 调用方法
                    afterLoad:function(anchorLink,index){
                            // 先移除所有section的current类样式
                            $(".section").removeClass("current");
                            // 为当前的section 添加current类样式
                            $(".section").eq(index-1).addClass("current");
                    },
                    // 页面加载完成 回调函数
                    afterRender:function(){
                        $(".section").eq(0).addClass("current");
                    }
                });
            }); 
        </script>
    
</body>
</html>